<!-- 注释掉初始生成的代码 <script lang="ts">
  import svelteLogo from './assets/svelte.svg'
  import viteLogo from '/vite.svg'
  import Counter from './lib/Counter.svelte'
</script>

<main>
  <div>
    <a href="https://vite.dev" target="_blank" rel="noreferrer">
      <img src={viteLogo} class="logo" alt="Vite Logo" />
    </a>
    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
    </a>
  </div>
  <h1>Vite + Svelte</h1>

  <div class="card">
    <Counter />
  </div>

  <p>
    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
  </p>

  <p class="read-the-docs">
    Click on the Vite and Svelte logos to learn more
  </p>
</main>

<style>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.svelte:hover {
    filter: drop-shadow(0 0 2em #ff3e00aa);
  }
  .read-the-docs {
    color: #888;
  }
</style> -->
<!-- Svelte语法例子-->
<script lang="ts">
  // 导入 Child 组件
  import Child from "./components/Child.svelte";

  //文本插值
  let firstName = "Drunk";
  let lastName = "Cat";
  let hobby = "read a book";
  let simpleHTML = `<P style="color: red;" >Red Content </P>`; // *简单的 HTML 片段 使用反引号``

  //响应式状态声明
  let count = $state(0); // 明确标识哪些变量是响应式的
  let name = $state("DrunkCat"); // 明确标识哪些变量是响应式的
  // 响应式状态更新函数
  let increment = () => {
    count += 1;
  };
  let decrement = () => {
    count -= 1;
  };

  //派生状态声明
  let price = $state(10); // 商品单价
  let quantity = $state(20); // 商品数量
  let totalPrice = $derived(price * quantity); // 计算总价格

  //数组声明
  const friends = ["Cat", "Dog", "Monkey", "Elephant", "Bird"];

  //Effect副作用例子使用变量
  let username = $state("Guest");
  //Effect副作用变更username 改变title
  $effect(() => {
    document.title = `Welcome, ${username}!`;
  });
  //Effect副作用计时器例子
  let seconds = $state(0);
  $effect(() => {
    const interval = setInterval(() => {
      seconds += 1;
    }, 1000);
    return () => clearInterval(interval);
  });
</script>

<!-- 主组件 App.svelte -->
<main>
  <div class="parent">
    <!-- 文本插值例子 -->
    <div class="child">
      <h3>文本插值例子：</h3>
      <p>{lastName}{firstName}，{hobby}</p>
      <p>{firstName + lastName}</p>
      <p>"{firstName || "字符串拼接"}"</p>
      <p>{@html simpleHTML}</p>
    </div>
    <!-- State响应式状态声明例子 -->
    <div class="child">
      <h3>State：响应式状态声明例子：</h3>
      <input bind:value={count} />
      <button onclick={increment}>+</button>
      <button onclick={decrement}>-</button>
      <h3>My name is:{name}</h3>
      <input type="text" bind:value={name} />
    </div>
    <!-- Props组件属性声明例子 -->
    <div class="child">
      <h3>Props组件属性声明例子：</h3>
      <!--  Child 组件接收来自父组件的 props  -->
      <Child name="DrunkCat" msg="Hello from Parent Component!" />
    </div>
    
    <!-- Derived派生状态声明例子 -->
    <div class="child">
      <h3>Derived：派生状态声明例子：</h3>
      <h4>Price: ${price}</h4>
      <h4>Quantity: ${quantity}</h4>
      <h4>TotalPrice: ${totalPrice}</h4>
      <input type="number" bind:value={price} />
      <input type="number" bind:value={quantity} />
    </div>
    <!-- Each遍历例子 -->
    <div class="child">
      <h3>Each：遍历例子：</h3>
      <ul>
        {#each friends as friend, index}
          <li>{index + 1} - {friend}</li>
        {/each}
      </ul>
    </div>
    <!-- Snippet模板片段例子 -->
    <div class="child">
      <!-- 模板片段（Snippet）：封装可复用的 HTML 片段，类似「模板中的函数」 -->
      <!-- 作用：统一渲染问候语，避免重复写相同 HTML，方便后续维护 -->
      <h3>Snippet：可重用的标记块例子：</h3>

      <!-- - name: string → 接收字符串类型的「姓名」参数（类型注解非必需，部分引擎支持类型约束）-->
      {#snippet greeting(name: string)}
        <!-- - 渲染结果：生成包含姓名的问候语段落 -->
        <!-- {name} 是模板变量，渲染时替换为传递的实际姓名 -->
        <p>Hello, {name}!</p>
      {/snippet}

      <!-- 条件判断（if 语句）：控制片段是否渲染 -->
      <!-- 作用：根据条件动态展示内容（此处用 true 模拟「条件成立」，实际项目中通常是动态变量） -->
      {#if true}
        <!-- 渲染片段（@render）：调用上面定义的 greeting 片段并传递参数 -->
        <!-- 传递具体姓名值，避免变量未定义 -->
        {@render greeting((name = "Monkey King"))}
        <!-- 可选：传递动态变量（需提前定义变量） -->
        <!-- {#set username = "Bob"} -->
        <!-- {@render greeting(name=username)} -->
      {/if}
    </div>

    <!-- Effect副作用例子 -->
    <div class="child">
      <h3>Effect：副作用例子：</h3>
       <!-- 显示经过的秒数 -->
      <label for="effcetUser">Seconds elapsed: {seconds}</label>
      <!-- 变更用户名，会改变title -->
      <input id="effcetUser" type="text" bind:value={username} placeholder="Enter your name" />
    </div>
  </div>
</main>

<!-- 样式部分 -->
<style>
  .parent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
  }
  .child {
    border: 2px solid blue;
    width: 30%;
    height: 30%;
    margin-bottom: 10px;
    padding: 10px;
    float: left;
    text-align: left; /* 确保内容左对齐 */
  }
</style>
